<template>
    <div>
        <div class="header-box">
            <div class="header-left">
                <div class="toggle" @click="change">
                    <i :class="CollapseIcon"></i>
                </div>
                <div class="toggle" @click="refresh">
                    <i class="el-icon-refresh"></i>
                </div>
            </div>
            <div class="header-right">
                <div class="uname">{{ userName }}</div>
            </div>
        </div>
        <Tabs/>
    </div>
</template>

<script>
import Tabs from '../tabs/Tab.vue';
export default {
    components:{
        Tabs
    },
    data(){
        return{
            CollapseIcon:'el-icon-s-fold'
        }
    },
    methods: {
        change() {
            this.$store.commit('ChangeCollapse')
        },
        refresh(){
            this.$router.go(0);
        }
    },
    computed: {
        userName() {
            return localStorage.userName;
        },
        IsCollapse(){
            return this.$store.state.IsCollapse;
        }
    },
  watch:{
    IsCollapse(val){
      if(val){
        this.CollapseIcon='el-icon-s-unfold';
      }else{
        this.CollapseIcon='el-icon-s-fold';
      }
    }
  }
}
</script>

<style>
.header-box {
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0 10px;
}

.toggle {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

.toggle:hover,
.uname:hover {
    background-color: #f1f1f1;
}

.header-left {
    flex: 1;
    display: flex;
    align-items: center;
}

.header-right {
    margin-right: 10px;
}

.uname {
    margin-right: 15px;
    cursor: pointer;
    padding: 10px 20px;
    font-size: 13px;
}

</style> 